<template>
  <a-switch v-model="newValue"
            :checked="checked"
            :unCheckedChildren="unCheckedChildren"
            :checkedChildren="checkedChildren"
            :defaultChecked="defaultChecked"
            :disabled="disabled"
            :loading="loading"
            :size="size"
            @change="onChange"
            @click="onClick" />
</template>

<script>

import PropType from '@zh/common-utils/prop-types'

export default {
  name: 'ZSwitchOneZero',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: PropType.string.def('0'),
    checked: PropType.string.def(undefined),
    unCheckedChildren: PropType.string.def(undefined),
    checkedChildren: PropType.string.def(undefined),
    defaultChecked: PropType.string.def(undefined),
    disabled: PropType.bool.def(false),
    loading: PropType.bool.def(undefined),
    size: PropType.string.def(undefined),
  },
  data () {
    return {
      newValue: false
    }
  },
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler (v) {
        this.newValue = v == '1'
      }
    }
  },
  methods: {
    onChange (checked, event) {
      this.$emit('change', checked ? '1' : '0', event)
    },
    onClick (checked, event) {
      this.$emit('change', checked ? '1' : '0', event)
    }
  }
}
</script>

<style lang="less" scoped>
</style>